<template>
  <div id="div">
    <a-row>
      <a-col :span="3">
        <img src="../assets/kele.png" class="logo" />
        <span style="float: left" id="web_title">可乐题库</span>
      </a-col>
      <a-col :span="8">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
          @click="handleRoutePage"
        >
          <a-menu-item v-for="route in routers" :key="route.path">{{
            route.name
          }}</a-menu-item>
        </a-menu>
      </a-col>
      <a-col id="col3" :span="8"><a-input-search /></a-col>
      <a-col id="col4" :span="5"><AvatarComponent /></a-col>
    </a-row>
  </div>
</template>

<script setup>
import AvatarComponent from "@/components/AvatarComponent.vue";
import routers from "@/router/routers";
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
function handleRoutePage(item, key, keyPath) {
  router.push(item.key);
}
// 默认路由
let selectedKeys = ref < Array < String >> ["/"];
// 路由跳转后，更新选中的菜单项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});
</script>

<style scoped>
#col3 {
  text-align: right;
  margin-top: 15px;
}
.logo {
  width: 40px;
  margin-top: 15px;
  float: left;
  margin-right: 10px;
}
#web_title {
  font-size: 18px;
  color: white;
  margin-right: 30px;
  margin-left: 20px;
}
</style>
